<template>
  <div class="matter">
    <div style="margin-bottom: 5px">
      <el-button size="mini" @click="newHang">{{ $t('btn.newHang') }}</el-button>
      <el-button size="mini" @click="delHang">{{ $t('btn.delHang') }}</el-button>
    </div>
    <div>
      <jc-table
        :table-data="tableData"
        :table-header="tableHeader"
        table-height="630px"
        @rowClick="rowClick"
      >
        <el-table-column :label="$t('market.assetsnum')" prop="fassetsbillno" align="center" width="80">
          <!--      <template slot-scope="scope">
                      <el-input v-model="scope.row.fassetsbillno" />
                    </template>  -->
        </el-table-column>
        <el-table-column :label="$t('market.barcode1')" align="center" width="100">
          <template slot-scope="scope">
            <el-input v-model="scope.row.fbarcode" :disabled="isabled" />
          </template>
        </el-table-column>
        <el-table-column :label="$t('market.specify')" align="center" width="100">
          <template slot-scope="scope">
            <el-input v-model="scope.row.fmodel" :disabled="isabled" />
          </template>
        </el-table-column>
        <el-table-column :label="$t('market.areaname')" align="center" width="100">
          <template slot-scope="scope">
            <el-select v-model="scope.row.fareaid" size="mini" :disabled="isabled">
              <el-option
                v-for="item in billtype"
                :key="item.fid"
                :label="item.fname"
                :value="item.fid"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column :label="$t('market.fqty')" align="center" width="80">
          <template slot-scope="scope">
            <el-input-number
              v-model="scope.row.famount"
              size="mini"
              :disabled="isabled"
              @change="scope.row.fstockamount=scope.row.famount"
            />
          </template>
        </el-table-column>
        <el-table-column :label="$t('market.receiveamount')" prop="freceiveamount" align="center" width="80" />
        <el-table-column :label="$t('market.stockamount')" prop="fstockamount" align="center" width="80" />
        <el-table-column :label="$t('market.supplier')" prop="fsuppliername" align="center" width="140">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.fsuppliername"
              size="mini"
              :disabled="isabled"
            >
              <i
                slot="suffix"
                class="el-input__icon el-icon-search"
                @click="handleSuppliers(scope.$index)"
              />
            </el-input>
          </template>
        </el-table-column>
        <el-table-column :label="$t('market.usedepid')" prop="fusedepid" align="center" width="120">
          <template slot="header">
            <span style="color: #f32f2f">*</span>{{ $t('market.usedepid') }}
          </template>
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.fusedepname"
              size="mini"
              :disabled="isabled"
            >
              <i
                slot="suffix"
                class="el-input__icon el-icon-search"
                @click="handelWorkshop(scope.$index)"
              />
            </el-input>
          </template>
        </el-table-column>
        <el-table-column :label="$t('market.useid')" prop="fuseid" align="center" width="120">
          <template slot-scope="scope">
            <el-autocomplete
              v-model.trim="scope.row.fusername"
              highlight-first-item
              popper-class="my-autocomplete"
              size="mini"
              :disabled="isabled"
              :fetch-suggestions="querySearch19"
              @focus="handleApplicant(scope.$index)"
              @select="selectApply"
            >
              <i
                slot="suffix"
                class="el-input__icon el-icon-search"
                @click="openUser(scope.$index)"
              />
              <template slot-scope="{ item }">
                <div class="name">{{ item.fname }}</div>
              </template>
            </el-autocomplete>
          </template>
        </el-table-column>
        <el-table-column :label="$t('market.expenseite')" align="center" width="120">
          <template slot="header">
            <span style="color: #f32f2f">*</span>{{ $t('market.expenseite') }}
          </template>
          <template slot-scope="scope">
            <el-select v-model="scope.row.fexpenseitemid" size="mini" :disabled="isabled">
              <el-option
                v-for="item in billtype2"
                :key="item.fid"
                :label="item.fname"
                :value="item.fid"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column :label="$t('market.stareData')" align="center" width="120">
          <template slot="header">
            <span style="color: #f32f2f">*</span>{{ $t('market.stareData') }}
          </template>
          <template slot-scope="scope">
            <el-date-picker
              v-model.trim="scope.row.fusestartdate"
              type="date"
              value-format="yyyy-MM-dd"
              size="mini"
              :disabled="isabled"
              style="width: 163px"
            />
          </template>
        </el-table-column>
        <el-table-column :label="$t('market.endData')" align="center" width="120">
          <template slot="header">
            <span style="color: #f32f2f">*</span>{{ $t('market.endData') }}
          </template>
          <template slot-scope="scope">
            <el-date-picker
              v-model.trim="scope.row.fuseenddate"
              type="date"
              value-format="yyyy-MM-dd"
              size="mini"
              :disabled="isabled"
              style="width: 163px"
            />
          </template>
        </el-table-column>
        <el-table-column :label="$t('market.finvoiceno')" align="center" width="100">
          <template slot-scope="scope">
            <el-input v-model="scope.row.finvoiceno" :disabled="isabled" />
          </template>
        </el-table-column>
        <el-table-column :label="$t('market.finvoicedate')" align="center" width="120">
          <template slot-scope="scope">
            <el-date-picker
              v-model.trim="scope.row.finvoicedate"
              type="date"
              value-format="yyyy-MM-dd"
              size="mini"
              :disabled="isabled"
              style="width: 163px"
            />
          </template>
        </el-table-column>
        <el-table-column :label="$t('market.finvoiceunit')" align="center" width="100">
          <template slot-scope="scope">
            <el-input v-model="scope.row.finvoiceunit" :disabled="isabled" />
          </template>
        </el-table-column>
        <el-table-column :label="$t('market.allamount')" align="center" width="100">
          <template slot-scope="scope">
            <el-input-number
              v-model="scope.row.ftaxamount"
              size="mini"
              :disabled="isabled"
            />
          </template>
        </el-table-column>
        <el-table-column :label="$t('market.notrateamount')" align="center" width="100">
          <template slot-scope="scope">
            <el-input-number
              v-model="scope.row.funtaxamount"
              size="mini"
              :disabled="isabled"
            />
          </template>
        </el-table-column>
      </jc-table>
    </div>
    <!--申请人-->
    <user v-if="userVisiblit" @supplier="selectApply" />
    <!--  部门-->
    <responDepart v-if="departVisiblit" @depart="selUnit" />
    <!--供应商-->
    <supplier v-if="openSupplier" @supplier="supplierSelectRow" />
  </div>
</template>

<script>
import { queryViewItem } from '@/api/marketManage/marketOrder'
import autocomplete from '@/views/market/marketManage/createMarkerOrder/components/autocomplete'
import { queryAssetsNum } from '@/api/financial/assets'

export default {
  components: {
    supplier: () => import('@/views/purchasing/purchase/treePurchasePrice/component/supplier'),
    responDepart: () => import('@/views/quality/qualityDetail/component/responDepart'),
    user: () => import('@/views/basic/users/userslist/component/user')
  },
  mixins: [autocomplete],
  props: {
    tableData: {
      type: Array,
      default: function() {
        return []
      }
    },
    delArr: {
      type: Array,
      default: function() {
        return []
      }
    },
    isabled: {
      type: Boolean,
      default: false
    },
    num: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      fassetsbillno: 0,
      userVisiblit: false,
      departVisiblit: false, // 部门
      openSupplier: false, // 供应商
      indexSelf: 0,
      tableHeader: [],
      billtype: [],
      billtype2: [],
      pickerOptions: {
        // 当前日期之后禁止选择
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      }
    }
  },
  created() {
    this.queryTBasBilltype()
    this.queryTBasBilltype2()
  },
  methods: {
    // 资产位置
    async queryTBasBilltype() {
      const { data: RES } = await queryViewItem({ viewName: 'SX_ASSETS_AREA' })
      this.billtype = RES.list
    },
    // 费用项目
    async queryTBasBilltype2() {
      const { data: RES } = await queryViewItem({ viewName: 'SX_V_EXPENSEITEM_CARD' })
      this.billtype2 = RES.list
    },
    openUser(index) {
      this.indexSelf = index
      this.userVisiblit = true
    },
    // 使用人
    selectApply(ev) {
      if (ev.fuserId) {
        const item = this.tableData[this.indexSelf]
        item.fusername = ev.fname
        item.fuseid = ev.fuserId
      }
      this.userVisiblit = false
    },
    // 供应商
    handleSuppliers(index) {
      this.indexSelf = index
      this.openSupplier = true
    },
    // 部门
    handelWorkshop(index) {
      this.indexSelf = index
      this.departVisiblit = true
    },
    supplierSelectRow(item) {
      const { fsupplierId, fname } = item
      if (fsupplierId) {
        const item = this.tableData[this.indexSelf]
        item.fsupplierid = fsupplierId
        item.fsuppliername = fname
      }
      this.openSupplier = false
    },
    // 部门
    selUnit(ev) {
      if (ev?.fid) {
        const item = this.tableData[this.indexSelf]
        item.fusedepname = ev.fname
        item.fusedepid = ev.fid
      }
      this.departVisiblit = false
    },
    // 新增行
    newHang() {
      if (this.tableData.length === 0 || !this.fassetsbillno) {
        queryAssetsNum({}).then(res => {
          if (res.code === 0) {
            this.fassetsbillno = Number(res.data.fassetsbillno)
          }
        })
      }
      this.tableData.forEach(res => {
        this.num -= res.fstockamount || 0
      })
      // this.fassetsbillno = Number(this.tableData[0]?.fassetsbillno) || 0
      setTimeout(() => {
        this.tableData.push({
          fassetsbillno: this.fassetsbillno + this.tableData.length,
          fbarcode: '',
          fmodel: '',
          fareaid: '',
          famount: this.num, // 数量
          fstockamount: this.num, // 可领用数量
          freceiveamount: 0,
          fsuppliername: '',
          fusedepname: '',
          fusername: '',
          fexpenseitemname: '',
          fusestartdate: new Date().toLocaleDateString().split('/').join('-'),
          fuseenddate: new Date().toLocaleDateString().split('/').join('-'),
          funtaxamount: 0,
          ftaxamount: 0,
          finvoiceunit: 0,
          finvoicedate: new Date().toLocaleDateString().split('/').join('-'),
          finvoiceno: ''
        })
      }, 100)
    },
    // 单击行
    rowClick(row) {
      this.indexSelf = row.index
    },
    // 删除行
    delHang() {
      const fentry = this.tableData[this.indexSelf].fentryid
      this.delArr.push(fentry)
      this.tableData.splice(this.indexSelf, 1)
    }
  }
}
</script>

<style scoped lang="scss">
.matter {
  @include listBom;
  padding: 0;
  .leftX::after {
    content: '*';
    color: red;
  }
}
</style>

